<template>
  <view class="zz-shopInfo_202008111454">
    <!-- 轮播 -->
    <view class="swiper-container">
      <swiper
        autoplay
        indicator-dots
        indicator-active-color="#fff"
        circular
        class="swiper-container_in"
      >
        <view
          v-for="(item, index) in carouselList"
          :key="index"
        >
          <swiper-item
            v-if="item.imagePath"
          >
            <image
              mode="widthFix"
              class="zz-img-fit"
              :src="item.imagePath"
            />
          </swiper-item>
        </view>
      </swiper>
    </view>
    <!-- 信息 -->
    <view class="shopinfo-content">
        <!--  -->
        <view class="zz-mb48 fs36 fs-bold lh50 color000">{{shopDetailInfo.shopName}}</view>
        <!--  -->
        <view class="zz-flex zz-mb48">
            <view class="zz-mr20 fs30 fs-bold lh42 color333">营业时间</view>
            <view class="fs28 lh42 color4A">{{shopDetailInfo.serviceTime}}</view>
        </view>
        <!--  -->
        <view class="zz-flex zz-mb48">
            <view class="zz-mr20 fs30 fs-bold lh42 color333">店铺地址</view>
            <view 
              :class="[distanceInfo.dis?'zz-flex-fb60_auto':'zz-flex-fb70_auto']"
              class="zz-mr20 fs28 lh42 color4A">{{shopDetailInfo.address}}</view>
            <view 
              @tap="ZZopenLocation(shopDetailInfo.latitude,shopDetailInfo.longitude)"
              v-if="distanceInfo.dis"
              class="zz-flex lh42">
                <text 
                    :style="themeStyles.textMainColor"
                    class="fs32 template__icon template__icon-address"></text>
                <text class="zz-pos_rel zz-t2 fs24 color999">{{distanceInfo.dis}}km</text>
            </view>
        </view>
        <!--  -->
        <view class="zz-flex lh42 zz-mb48">
            <view class="zz-mr20 fs30 fs-bold lh42 color333">联系电话</view>
            <view class="zz-mr20 fs28 lh42 color4A">{{shopDetailInfo.contactNumber}}</view>
            <text 
                @tap="ZZmakePhoneCall(shopDetailInfo.contactNumber)"
                :style="themeStyles.textMainColor"
                class="fs32 template__icon template_icon-zzphone"></text>
        </view>
        <!--  -->
        <view class="zz-flex zz-mb48">
            <view class="zz-mr20 fs30 fs-bold lh42 color333">店铺介绍</view>
            <view class="flex79 zz-mr20 fs28 lh42 color4A">{{shopDetailInfo.intro}}</view>
        </view>
    </view>
		<!-- 授权弹层 -->
		<authorize 
			:visible="showAuthorizePop"
			title="请设置授权"
			content="暂未授权获取位置信息，请点击进行授权。"
      @close="showAuthorizePop=false"></authorize>
  </view>
</template>
<script>
/* mixin */
import locationMixin from "@/mixins/location";
/* components */
import authorize from "@/components/authorize";
/* vuex */
import { mapState } from "vuex";
export default {
    mixins:[
      locationMixin
    ],
    components:{
      authorize
    },
    computed:{
        ...mapState("shop", ["shopDetailInfo"])
    },
  data() {
    return {
        /*  */
        carouselList:[
            /* {
                imagePath:"image/store-flag.png"
            },
            {
                imagePath:"image/company-flag.png"
            } */
        ]
    };
  },
  async onShow(){
      //
      console.log(this.shopDetailInfo);
      try {
        //店铺门头照
        if(this.shopDetailInfo.shopPhoto){
          //
          this.carouselList = null;
          this.carouselList = this.shopDetailInfo.shopPhoto.split(",").map(v=>{
            return {
              imagePath:v
            }
          });
        }else{
          //
          const res = await this.ZZgetSystemConfigValue({
            otherReqData:true,
            data:"default_image_shops"
          })
          //console.log(res);
          let { data } = res;
          //
          this.carouselList.splice(0,1,{
            imagePath:data
          })
        }
        //获取位置经纬度 + 获取与店铺距离
        await this._LocationAndDistance();
      } catch (error) {
        console.log(error);
      }
      
  }
};
</script>
<style lang="scss">
.zz-shopInfo_202008111454 {
  min-height:100vh;
  background-color:$theme-panel-bg-color;
  /*  */
  .swiper-container {
    height: 440rpx;
  }
  .swiper-container_in {
      height:100%;
  }
  /*  */
  .shopinfo-content {
      padding:40rpx;
      .flex57 {
          flex:0 0 57%;
          max-width:57%;
          text-align: justify;
      }
      .flex79 {
          flex:0 0 76%;
          max-width:76%;
          text-align: justify;
      }
  }
}
</style>